<template>
    <div>
        <!--为echarts准备一个具备大小的容器dom-->
        <div class="main" ref="main" id="main" style="width: 100%; height: 1000px"></div>
    </div>
</template>
  
<script>
/* eslint-disable */

export default {
    name: "",

    data() {
        return {
            chartData: { list: [] },
        };
    },
    // mounted() {
    //     this.drawHeatmap("main", this.chartData);
    // },
    methods: {
        generateData(i) {
            // const arr = []
            // for (let i = 0; i <= length; i++) {
            const subArr = []
            for (let j = 0; j < 15; j++) {
                subArr.push([i, j])
            }
            // arr.push(subArr)
            // }
            return subArr
        },
        fetchData() {
            let self = this;
            this.$http({
                url: this.$http.adornUrl('/data/wind/list3'),
                methods: 'get',
                responseType: 'json', // 设置返回数据的类型为 JSON
            }).then((response) => {
                const data = response.data;
                console.log(data);// 打印返回的数据
                this.chartData = data.list.map((item) => [item.ws10, +item.dir10, +item.ws30, +item.dir30, +item.ws50, +item.dir50, +item.ws70, +item.dir70, +item.wshub, +item.dirhub, +item.temp, +item.pressure, +item.rh, +item.power]);
                console.log(this.chartData);
                // this.renderChart();
                // console.log(this.chartData);
                // const newArr = data.list.map( v => {
                //     return 
                // })
                const arr = []
                for (let i = 0; i < 15; i++) {
                    const subArr = []

                    for (let j = 0; j < data.list.length; j++) {
                        const tempArr = [i, j]
                        tempArr.push(parseFloat(this.chartData[j][i]).toFixed(2))
                        subArr.push(tempArr)
                        // console.log(parseFloat(this.chartData[j][i]).toFixed(2));
                    }
                    arr.push(subArr)
                }

                console.log(arr);
                const newArr = []
                arr.forEach((v, i) => {
                    v.forEach(c => {
                        newArr.push(c)
                    })
                })
                console.log(newArr);
                self.charts.setOption({
                    xAxis: {
                        type: 'category',
                        data: [
                            'WS10', 'DIR10', 'WS30', 'DIR30', 'WS50', 'DIR50',
                            'WS70', 'DIR70', 'WSHUB', 'DIRHUB', 'TEMP',
                            'PRESSURE', 'RH', 'POWER'
                        ],
                        splitArea: {
                            show: true
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: [
                            'WS10', 'DIR10', 'WS30', 'DIR30', 'WS50', 'DIR50',
                            'WS70', 'DIR70', 'WSHUB', 'DIRHUB', 'TEMP',
                            'PRESSURE', 'RH', 'POWER'
                        ],
                        inverse: true, // 设置纵坐标翻转
                        splitArea: {
                            show: true
                        },
                        axisLabel: {
                            show: true
                        }
                    },
                    series: [
                        {
                            name: 'Punch Card',
                            type: 'heatmap',
                            data: newArr,
                            label: {
                                show: true
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            });
        },
        drawHeatmap(id, data) {
            // prettier-ignore
            const hours = [
                'WS10', 'DIR10', 'WS30', 'DIR30', 'WS50', 'DIR50',
                'WS70', 'DIR70', 'WSHUB', 'DIRHUB', 'TEMP',
                'PRESSURE', 'RH', 'POWER'
            ];
            // prettier-ignore
            // const days = data.list.map((item, index) => index + 1);
            // prettier-ignore
            data = data.list.map(function (item) {
                return [item[1], item[0], item[2] || '-'];
            });
            this.charts = this.$echarts.init(document.getElementById("main"));
            this.charts.setOption({
                tooltip: {
                    position: 'top'
                },
                grid: {
                    left: 'center',
                    top: 'center',
                    width: '60%',
                    height: '60%',
                },
                xAxis: {
                    type: 'category',
                    data: hours,
                    position: 'top', // 设置横坐标显示在上方
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    // data: [
                    //         'POWER', 'RH', 'PRESSURE', 'TEMP', 'DIRHUB', 'WSHUB',
                    //         'DIR70', 'WS70', 'DIR50', 'WS50', 'DIR30',
                    //         'WS30', 'DIR10', 'WS10'
                    //     ],
                    data: [
                        'WS10', 'DIR10', 'WS30', 'DIR30', 'WS50', 'DIR50',
                        'WS70', 'DIR70', 'WSHUB', 'DIRHUB', 'TEMP',
                        'PRESSURE', 'RH', 'POWER'
                    ],
                    // splitArea: {
                    //     show: true
                    // }
                },
                visualMap: {
                    min: -0.5,
                    max: 1,
                    type: 'piecewise',
                    calculable: true,
                    orient: 'vertical', // 方向为垂直
                    // right: '10px', // 显示在右侧
                    top: 'center', // 纵向居中
                    itemWidth: 30, // 设置视觉映射条的宽度
                    itemHeight: 70, // 设置视觉映射条的高度
                    // text: ['1', '-0.5'], // 设置范围阶段的数值标签，按顺序对应范围段
                    right: '10%',
                    bottom: '15%',
                    pieces: [
                        { min: -0.5, max: -0.2, label: '-0.5--0.2' },
                        { min: -0.2, max: 0.0, label: '-0.2-0.0' },
                        { min: 0.0, max: 0.2, label: '0.0-0.2' },
                        { min: 0.2, max: 0.4, label: '0.2-0.4' },
                        { min: 0.4, max: 0.6, label: '0.4-0.6' },
                        { min: 0.6, max: 0.8, label: '0.6-0.8' },
                        { min: 0.8, max: 1.0, label: '0.8-1.0' }
                    ],
                    color: ['#b70d28', '#f29072', '#f4c4ac', '#dfdbd8', '#a1c0ff', '#6e91f2', '#4257c9'], // 添加颜色属性，设置自定义颜色数组
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data.list,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]

            });
        },
    },
    //调用
    mounted() {
        this.$nextTick(function () {
            this.drawHeatmap("main", this.chartData);
        });
        this.$nextTick(function () {
            this.fetchData();
        });
    },
};
</script>

<style scoped></style>